<template>
    <div class="super-tab-part">
        <div v-for="tab,index in tabs"
             @click="tabSwitch(index)"
             :class="[classTabsItemObject,{'on': active == tab.id}]">

            <div class="tab-item-content-part">
                <slot name="item" :tab="tab">
                    <div class="tab-text-part">{{ tab.text }}</div>
                </slot>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "tabsComponent",
        props: {
            tabs: {
                type: Array,
                default() {
                    return []
                }
            },
            current: {
                type: Number,
                default() {
                    return 0
                }
            },
            theme: {
                type: Number,
                default() {
                    return 0
                }
            }
        },
        data: function(){
            return {
                active: 0,
            };
        },
        created: function() {
            this.active = this.current;
        },
        computed: {
            classTabsItemObject: function () {
                if (this.theme === 0) {
                    return 'tab-item-part';
                } else if (this.theme === 1){
                    return 'tab-item-part-theme2';
                }
            },
        },
        methods: {
            tabSwitch(index) {
                this.active = this.tabs[index]['id'];
                this.$emit('tab-switch', {index: index}); // 通知外面
            }
        }
    }
</script>

<style lang="scss">

    .super-tab-part {
        display: flex;
        display: -webkit-flex; /* Safari */
        width: 100%;
        height: 1rem;
        justify-content: center;
        align-items: center;
        background: #fafafa;

        /*样式一*/
        .tab-item-part {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            padding-top: 0.03rem;
            padding-bottom: 0.03rem;
            background: #e8e8e8;
            border: 2px solid #e6e6e6;

            .tab-item-content-part {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                .tab-text-part {
                    font-size: 1.2em;
                }
            }
        }

        .tab-item-part.on {
            color: #ffffff;
            border: 2px solid #10b2ba;
            background: #3cc8a8;

            .tab-item-content-part {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                .tab-text-part {
                    font-size: 1.2em;
                }
            }
        }

        /*样式二*/
        .tab-item-part-theme2 {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            padding-top: 0.03rem;
            padding-bottom: 0.03rem;
            background: #ffffff;
            .tab-item-content-part {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                .tab-text-part {
                    font-size: 1.2em;
                }
            }
        }

        .tab-item-part-theme2.on {
            color: #10b2ba;
            border: 1px solid #ffffff;
            border-bottom: 1px solid #10b2ba;
            background: #ffffff;
            .tab-item-content-part {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                .tab-text-part {
                    font-size: 1.2em;
                }
            }
        }


    }
</style>